﻿@model S4Store.Models.SellerReport.IndexModel
@{
    Layout = null;
    ViewBag.Title = "Index";
    var container = "div" + Guid.NewGuid().ToString();
    var names = new List<String>();
    var xssjs = new List<String>();
    var khmbs = new List<String>();
    foreach (var item in Model.Items)
    {
        names.Add("\"" + item.Name + "\"");
        xssjs.Add(item.XSSJ.toInt());
        khmbs.Add(item.KHMB.toInt());
    }
}
<div style="height:100%; overflow:auto">
@Html.Action("ReportBar", "Common", Model.BarModel)

<div style="position:relative; width:100%">
    @if (Model.IsMonthConfigConfirmed)
    {        
        <div id="@container"></div>
        <div>
        <div style=" margin-left:70px; overflow:hidden">
        <table style="width:100%">
            <tr>
            @foreach (var item in Model.Items)
            {
                var diff = item.XSSJ >= item.KHMB;
                if (item.Name == "超限价格成交率")
                {
                    diff = item.XSSJ < item.KHMB;
                }
                if (item.Name == "试驾未成交率")
                {
                    diff = item.XSSJ < item.KHMB;
                }
                <td align="center">
                    @if (diff)
                    {
                       <text><a class="smallgreen" href="@item.Url" title="@item.Name" target="navtab"></a></text>
                    }
                    else
                    {
                         <text><a class="smallred"  href="@item.Url" title="@item.Name" target="navtab"></a></text>
                    }
                </td>
            }
            </tr>
        </table>
        </div>
        </div>
        <script type="text/javascript">
            $('#@container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '销售部关键KPI概况'
                },
                xAxis: {
                    categories: [@Html.Raw(String.Join(",", names))]
                },
                colors:['#84bc5b','#56a7b8'],
                yAxis: {
                    min: 0,
                    title: {
                        text: '进度百分比(%)'
                    }
                },
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br /><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [
                {
                    name: '销售实绩',
                    data: [@String.Join(",", xssjs)]

                }, 
                {
                    name: '考核目标',
                    data: [@String.Join(",", khmbs)]

                }
                ]
            });
</script>
    }
    else
    {
        <text>还未完成月初配置</text>
    }
</div>
</div>